/*
 * Created by weishuwen on 2015/3/16.
 *
 * html样式片段不能加空格
*/

UE.registerUI('editone', function (editor, uiName) {

    var me = editor;
    var dialog = null;
    var COMMAND = {
        editone: 0,
        edittwo: 1,
        editthree: 2,
        editfour: 3,
        editfive: 4,
        editsix: 5,
        editseven: 6,
        editeight: 7
    };
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    editor.registerCommand(uiName, {
        execCommand: function (cmd) {
            //alert('execCommand:' + uiName)
            // 判断是否要绑定事件
            var flag = true;
            if (!dialog) {
                dialog = new baidu.editor.ui.Dialog({
                    title: '在线微信样式',
                    ///content: $("#styleDialog").html(),
                    content: styleDialog.render({}),
                    draggable: true,
                    editor: editor
                });
                flag = false;
                dialog.open();  // 打开对话框
            } else {
                dialog._show();  //直接显示出来，防止用open时候重新渲染
            }
            var winHeight = $(window).height();
            if (winHeight < 600) {
                var h = winHeight - 50;
                if (h < 100) {
                    h = 100;
                }
                $('.style-content').height(h);
            } else {
                $('.style-content').height(555);
            }
            var node = $(dialog.getDom());

            switchTab(node.find('.style-nav a'), node.find('.style-section'), COMMAND[cmd]);  // 默认显示的

            if (flag) {
                return;
            }

            node.on('click', '.style-nav a', function () {
                /**
                 * 对话框头部导航事件绑定
                 */
                switchTab(node.find('.style-nav a'), node.find('.style-section'), $(this).index());

                return false;
            }).on('click', 'ul li', function () {
                /**
                 * 内容区域块的选项绑定
                 */
                var element = $(this);
                var root = element.parents('.style-section');
                var text = root.find('.style-footer-text');

                text.html(element.html());

                return false;
            }).on('click', '.style-footer a', function () {
                /**
                 * 对话框确定按钮的绑定
                 */
                var element = $(this);
                var html = element.parent().find('.style-footer-text').html();

                //console.log((html));

                try {
                    me.execCommand('insertHtml', html);
                } catch (e) {

                } finally {
                    dialog.close();
                }
                return false;
                /*node.off('click').remove();*/
            });

            node.find('.colorpicker').each(function () {
                //$(this).farbtastic()
                var $_this = $(this);
                $_this.farbtastic(function () {
                    var _this = this;
                    var text = $_this.parents('.style-section').find('.style-footer-text');
                    var color = $_this.siblings('.color');
                    var modify = text.find('[class$="color"]');
                    // 设置input的内容
                    color.css({ "border-color": _this.color }).val(_this.color);
                    // 当前选择项目查找样式值以及改变颜色
                    modify.each(function (index, value) {
                        var className = $(this)[0].className;  //允许多个class
                        var style = $(this)[0].style;
                        var names = className.split(" ");

                        $.each(names, function (index, value) {
                            if ("brcolor" == value) {
                                style.borderColor = _this.color;
                            }
                            if ("bkcolor" == value) {
                                style.backgroundColor = _this.color;
                            }
                            if ("bfcolor" == value) {
                                style.color = _this.color;
                            }
                        });
                    });
                });
            });

            /**
             * 导航事件
             * @param nav
             * @param content
             * @param index 当前索引
             */
            function switchTab(nav, content, index) {
                nav.eq(index).addClass('active').siblings().removeClass('active');
                content.hide().eq(index).fadeIn();
            }


        }
    });
    //创建一个button
    var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: uiName,
        //添加额外样式，指定icon图标，这里默认使用一个重复的icon
        cssRules: 'background-position: -500px 0;',
        //点击时执行的命令
        onclick: function () {
            //这里可以不用执行命令,做你自己的操作也可
            editor.execCommand(uiName);
        }
    });
  
    //因为你是添加button,所以需要返回这个button
    return btn;
});

UE.registerUI("editone1", function (editor, uiName) {

    editor.registerCommand(uiName, {
        execCommand: function () {
            alert('execCommand:' + uiName)
        }
    });

    var me = editor;
    var dialog = null;
    var COMMAND = {
        editone: 0,
        edittwo: 1,
        editthree: 2,
        editfour: 3,
        editfive: 4,
        editsix: 5,
        editseven: 6,
        editeight: 7
    };
    /**
     *     execCommand(cmdName, dialog): 点击toolbar，调用插件，大部分逻辑都在这里写
     *     queryCommand(cmdName, dialog): 状态处理
     *     baidu.editor.ui.Dialog: 是否使用弹出层，注意：dialog关闭后其中的内容会清除，但dialog本身不会从dom移除
     *         title: 标题,默认同description
     *         content: 内容
     */
    me.commands["editone1"]
        = me.commands["edittwo"]
        = me.commands["editthree"]
        = me.commands["editfour"]
        = me.commands["editfive"]
        = me.commands["editsix"]
        = me.commands["editseven"]
        = me.commands["editeight"]
        =
    {
        execCommand: function (cmd) {
            // 判断是否要绑定事件
            var flag = true;
            if (!dialog) {
                dialog = new baidu.editor.ui.Dialog({
                    title: '在线微信样式',
                    ///content: $("#styleDialog").html(),
                    content: styleDialog.render({}),
                    draggable: true,
                    editor: this
                });
                flag = false;
                dialog.open();  // 打开对话框
            } else {
                dialog._show();  //直接显示出来，防止用open时候重新渲染
            }
            
        }
    };
});